<template>
	<view class="Application">
		<view class="item_content">
			<image :src="dataList.cover||'/pagesB/static/微信图片_20201124091755.png'" mode=""></image>
			<view class="ItemContent">
				<view class="title">{{dataList.name}}</view>
				<view class="parameter">
					<view class="parameter1">{{dataList.option_name}}</view>
				</view>
				<view class="price_ctrlbox">
					<view class="price">￥{{$amountCvs(dataList.price)}}</view>
					<view class="ctrlbox">x{{dataList.quantity}}</view>
				</view>
			</view>
		</view>
		<view class="order_title">
			<view class="title_left">退款原因</view>
			<view class="price">{{dataList.reason}}</view>
		</view>
		<view class="order_title">
			<view class="title_left">退款金额</view>
			<view class="price">{{dataList.refund_price}}元</view>
		</view>
		<view class="voucher" v-if="dataList.images.length!=0">
			<view class="voucher_title">
				上传凭证
			</view>
			<view class="voucher_content">
				<image  v-for="(item,index) in dataList.images" :key="index" :src="item||'/pagesB/static/微信图片_20201124091755.png'" class="sctu"></image>
				<!-- <image v-if="img != ''" :src="img" class="sctu"></image>
				<image v-if="img != ''" :src="img" class="sctu"></image>
				<image v-if="img != ''" :src="img" class="sctu"></image> -->
			</view>
	</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				dataList:[],
			};
		},
		onLoad(option) {
			this.$request('/app/order/refundDetail','post',{
				refund_sn:option.refund_sn,
				access_token:uni.getStorageSync('access_token').replace(/^\"|\"$/g,''),
				return_message_id:option.id
			}).then(res=>{
				this.dataList=res.content
			})
		}
	}
</script>

<style lang="less">
	.Application{
		height: 100%;
		background-color: #F3F4F5;
		padding-top: 20rpx;
		.item_content {
			display: flex;
			padding: 20rpx;
			border-bottom: 1px solid #eeeeee;
			background-color: #fff;
			margin-bottom: 10rpx;
			image {
				height: 180rpx;
				width: 180rpx;
				margin-right: 16rpx;
			}
			.ItemContent {
				flex: 1;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				.title {
					height: 72rpx;
					font-size: 28rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #111111;
				}
				.parameter {
					height: 34rpx;
					font-size: 24rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #9da5a8;
				}
				.price_ctrlbox {
					display: flex;
					justify-content: space-between;
				}
				.price {
					font-size: 28rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #111111;
				}
				.ctrlbox {
					font-size: 24rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #9da5a8;
				}
			}
		}
		
		.order_title {
			display: flex;
			padding: 30rpx;
			border-bottom: 1px solid #eeeeee;
			background-size: 28rpx 28rpx;
			background-color: #fff;
			.title_left {
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #111111;
				margin-right: 30rpx;
			}
			input{
				flex: 1;
				font-size: 28rpx;
			}
		}
		.voucher{
			padding: 30rpx;
			background-color: #fff;
			border-bottom: 1px solid #eeeeee;
			.voucher_title{
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #111111;
			}
			.voucher_content{
				display: flex;
				margin: auto;
				margin-top: 20px;
				flex-wrap: wrap;
			}
			.sctu{
				width:80px;
				height:80px;
				margin-right: 15px;
			}
			.jia{
				width:80px;
				height:80px;
				background-color:#C8C7CC;
				color:#808080;
				text-align: center;
				line-height: 80px;
				font-size: 30px;
				font-weight: 700;
			}
		}
		
	}
</style>
